<template>
  <!--数据驾驶舱-->
  <el-row >
    <page :column='false' style="min-width: 1300px;overflow:hidden;">
      <div class="gxhbg"   :class="{fullscreen:isFull}">
        <canvas id="canvas"></canvas>
        <i class="full-screen iconfont icon-quanping" @click="FullClick()"></i>
        <realHeader
          :isUpdata="isUpdata"
          ref="realheadref"
          @saveAssembly='saveAssembly'
          @cancelAssembly="cancelAssembly">
          <div class="sumBlock clear">
            <div v-if="reportHead.indexOf('TotalPassengerFlowWeek')>-1"
                 class="sum"
                 v-loading="!headCompanyKPIlist.includes('enters')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>本周总客流量</h6>
              <h3><span id="weekFlow">0</span>人</h3>
              <p class="sum-p" :class="headData.week.sumFlow.tb>999?'duo':''">
                <span class="sum-p-span1">比上月</span>
                <span class="sum-p-span2">
                          <i
                            :class="headData.week.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.week.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                          {{headData.week.sumFlow.tb==null||headData.week.sumFlow.tb===''?'':Math.abs(headData.week.sumFlow.tb)}}%
                        </span>
                <span class="sum-p-span1">比上期</span>
                <span class="sum-p-span2">
                          <i
                            :class="headData.week.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.week.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                          {{headData.week.sumFlow.hb==null||headData.week.sumFlow.hb===''?'':Math.abs(headData.week.sumFlow.hb)}}%
                        </span>
              </p>
            </div>
            <div v-if="reportHead.indexOf('TotalSalesWeek')>-1"
                 class="sum"
                 v-loading="!headCompanyKPIlist.includes('actual_sales')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>本周总销售额</h6>
              <h3>￥<span id="weekSale">0</span></h3>
              <p class="sum-p">
                <span class="sum-p-span1">比上月</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.week.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.week.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.week.sumSale.tb==null||headData.week.sumSale.tb===''?'':Math.abs(headData.week.sumSale.tb)}}%
                    </span>
                <span class="sum-p-span1">比上期</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.week.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.week.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.week.sumSale.hb==null||headData.week.sumSale.hb===''?'':Math.abs(headData.week.sumSale.hb)}}%
                    </span>
              </p>
            </div>
            <div v-if="reportHead.indexOf('TotalPassengerFlowToday')>-1" class="sum mid"
              v-loading="!headCompanyKPIlist.includes('enters')"
              element-loading-text="无该指标权限"
              element-loading-spinner="el-icon-warning-outline"
              element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>今日总客流量</h6>
              <h3><span id="dayFlow">0</span>人</h3>
              <p class="sum-p">
                <span class="sum-p-span1">比上周</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.day.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.day.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.day.sumFlow.tb==null||headData.day.sumFlow.tb===''?'':Math.abs(headData.day.sumFlow.tb)}}%
                    </span>
                <span class="sum-p-span1">比昨天</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.day.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.day.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.day.sumFlow.hb==null||headData.day.sumFlow.hb===''?'':Math.abs(headData.day.sumFlow.hb)}}%
                    </span>
              </p>
            </div>
            <div v-if="reportHead.indexOf('TotalSalesToday')>-1"
                 class="sum mid"
                 v-loading="!headCompanyKPIlist.includes('actual_sales')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>今日总销售额</h6>
              <h3>￥<span id="daySale">0</span></h3>
              <p class="sum-p">
                <span class="sum-p-span1">比上周</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.day.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.day.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.day.sumSale.tb==null||headData.day.sumSale.tb===''?'':Math.abs(headData.day.sumSale.tb)}}%
                    </span>
                <span class="sum-p-span1">比昨天</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.day.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.day.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.day.sumSale.hb==null||headData.day.sumSale.hb===''?'':Math.abs(headData.day.sumSale.hb)}}%
                    </span>
              </p>
            </div>
            <div v-if="reportHead.indexOf('TotalPassengerFlowMonth')>-1" class="sum"
              v-loading="!headCompanyKPIlist.includes('enters')"
              element-loading-text="无该指标权限"
              element-loading-spinner="el-icon-warning-outline"
              element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>本月总客流量</h6>
              <h3><span id="monthFlow">0</span>人</h3>
              <p class="sum-p">
                <span class="sum-p-span1">比去年</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.month.sumFlow.tb<0?'el-icon-caret-bottom':(!!headData.month.sumFlow.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.month.sumFlow.tb==null||headData.month.sumFlow.tb===''?'':Math.abs(headData.month.sumFlow.tb)}}%
                    </span>
                <span class="sum-p-span1">比上月</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.month.sumFlow.hb<0?'el-icon-caret-bottom':(!!headData.month.sumFlow.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.month.sumFlow.hb==null||headData.month.sumFlow.hb===''?'':Math.abs(headData.month.sumFlow.hb)}}%
                    </span>
              </p>
            </div>
            <div v-if="reportHead.indexOf('TotalSalesMonth')>-1"
                 class="sum"
                 v-loading="!headCompanyKPIlist.includes('actual_sales')"
                 element-loading-text="无该指标权限"
                 element-loading-spinner="el-icon-warning-outline"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
              <h6>本月总销售额</h6>
              <h3>￥<span id="monthSale">0</span></h3>
              <p class="sum-p">
                <span class="sum-p-span1">比去年</span>
                <span class="sum-p-span2">
                      <i
                        :class="headData.month.sumSale.tb<0?'el-icon-caret-bottom':(!!headData.month.sumSale.tb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.month.sumSale.tb==null||headData.month.sumSale.tb===''?'':Math.abs(headData.month.sumSale.tb)}}%
                    </span>
                <span class="sum-p-span1">比上月</span> 
                <span class="sum-p-span2">
                      <i
                        :class="headData.month.sumSale.hb<0?'el-icon-caret-bottom':(!!headData.month.sumSale.hb?'el-icon-caret-top':'el-icon-minus')"></i>
                      {{headData.month.sumSale.hb==null||headData.month.sumSale.hb===''?'':Math.abs(headData.month.sumSale.hb)}}%
                    </span>
              </p>
            </div>
          </div>
        </realHeader>
        <div class="grid " :style="'min-height:'+minH+'px'">
          <template v-for="(value,key) in items">
            <div class="item" v-if="value.isShow"
                 :data-id='key' :class="key" :key="key"
                 :style="{'height':Number(value.h)?value.h+'px':value.h,'width':Number(value.w)?value.w+'px':value.w}">
              <div :is='value.name' :GetData="getData">
                <el-button @click='deleteLayout(key)' size='mini' style="position: absolute;top: 0;"
                           type="danger" icon="el-icon-close" circle></el-button>
              </div>
            </div>
          </template>
        </div>
      </div>
      <el-dialog
        title="个性化设置"
        :visible.sync="dialog"
        class="gxhdialog an"
        v-dialogDrag
        width="810px"
        top='5vh'
        center
        :append-to-body="true"
        modal
      >
        <el-dialog
          :visible.sync="demodailog"
          :title="'预览 - '+demoVue.title"
          class="demolog"
          v-dialogDrag
          :width="demoVue.w+'px'"
          
          top='10%'
          append-to-body>
          <div :is="demoVue.name" :isdemo="true" :style="{height:demoVue.h+'px'}" v-if="demodailog"></div>
        </el-dialog>
       

        <div class="vueCompany" >
          <el-checkbox-group class="headzujian" v-model="reportHeadTemp" style="text-align:left;">
            <el-checkbox v-for='item in reportListHead' :key='item.key' :label="item.key" type="primary" border>
              {{item.title}}
            </el-checkbox>
          </el-checkbox-group>
           <span class="kpi-type">指标类型：</span>
            <el-select :popper-append-to-body="false" class="kpi-typeval" v-model="kpiValue" placeholder="请选择" size="mini">
              <el-option label="全部" value=""></el-option>
              <el-option label="客流" value="1"></el-option>
              <el-option label="销售" value="2"></el-option>
              <el-option label="人脸" value="3"></el-option>
            </el-select>
          <el-checkbox-group v-model="report" style="text-align:left;">
            <template  v-for='(value,key) in items'>
              <el-checkbox  v-if='kpiValue == ""||kpiValue == value.kpiValue' :key='key' type="primary" :label="key" border>
                {{value.title}}
                <slot><i @click.prevent="show($event,value)" class="iconfont icon-yulan"></i></slot>
              </el-checkbox>
            </template>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button  @click='addRport();' type="primary">保存配置</el-button>
        </span>
      </el-dialog>
    </page>
  </el-row>
</template>
<style lang="scss">
@font-face {
    font-family: aliwebfont;//自定义字体名称
    src: url('/static/css/webfont.ttf');
}
#grid_hidden{display: none;}
.grid{position: relative;width: 100%;min-height:550px;}
.item{
    overflow: hidden;
		position: absolute;
		display: block;
    margin: 13px;
    background: transparent!important;
		.dragmove{
			cursor: all-scroll;
			.el-button--mini.is-circle{
				padding:3.5px 3px 3.5px 4px;
				background: #184689;
				border-color: #184689;
        right: 5px;
        top:0;
				opacity: 0;
				display: block;
        .el-icon-close{
          color:#4f94db;
        }
			}
			&:hover{
				.el-button--mini.is-circle{
					opacity: 1;
					&:hover{
						background: #2b78cd;
            border-color: #2b78cd;
            .el-icon-close{
              color:#7ab7fa;
            }
					}
				}
				.report_i{
					right: 41px;
				}
				
			}
		}
		&:hover{
			box-shadow: 0px 2px 10px 2px #053177;
		}
	
  }
  .item.muuri-item-dragging {
	  z-index: 3;
  }

  .item.muuri-item-releasing {
	  z-index: 2;
  }

  .item.muuri-item-hidden {
	  z-index: 0;
  }
  .gxhdialog{
    &.an{
      .el-dialog{
        .el-dialog__header{
           background: url('/static/img/dialogDrag.png') no-repeat;
           background-size:100% 100%;
        } 
       
      }
     
    }
    .el-dialog--center{
       background: #0c2c5c;
      .el-input--mini{
        .el-input__inner{
          background: #092752;
          color:#3983d6;
          border: 1px solid #032457;
        }
      }
      .el-dialog__body{
        padding: 34px 40px 10px;
        
       .vueCompany{
         .kpi-type{
          color:#5896e6;
        }
        .kpi-typeval{
          margin-bottom:20px;
          .el-input{
            &.is-focus{
              .el-input__inner{
                border-color:#3980d4;
              }
            }
            .el-input__inner{
              border-color:#3373be;
              background: #1c4e8a;
            }
            .el-input__suffix{
              .el-select__caret{
                color:#5391e2;  
              }
            }
          }
          .el-select-dropdown{
            background:#1e5598;
            border-color:#235b9d;
            .popper__arrow{
              border-bottom-color:#1e5598;
              border-top-color:#1e5598;
              &::after{
                border-bottom-color:#1e5598;
                border-top-color:#1e5598;
              }
            }
            .el-scrollbar{
              .el-select-dropdown__list{
                .el-select-dropdown__item{
                  color:#599ce6;
                  &.selected{
                    background: #3575c0;
                    color:#99c8fc;
                  }
                  &.hover{
                    background: #2a66ac;
                    color:#7eb3ee;
                  }
                }
              }
            }
          }
        }
          .el-checkbox-group{
             display:flex;
             justify-content:space-between;
             flex-wrap: wrap;
             &.headzujian{
              padding-bottom: 10px; 
              border-bottom: 1px solid #113f85;
              margin-bottom: 20px;
              
              .el-checkbox{
                width:100px;
                .el-checkbox__label{
                  padding-left: 5px;
                }
              }
                 
            }
            .el-checkbox{
              height: 36px;
              line-height: 36px;
              width: 230px;
              margin: 0;
              padding: 0 10px;
              background: #0f3876;
              border-color:#133c7d;
              margin-bottom: 14px;
              .el-checkbox__label{
                color:#87bcff;
                .iconfont{
                  position: absolute;
                  right: 12px;
                  color: #6e94ff;
                  z-index:999;
                  &:hover{
                    color: #aac1ff;
                  }
                }
              }
              .el-checkbox__inner{
                background: transparent;
                border-radius: 7px;
                border-color: #5983ff;
              }
              &:hover{
                border-color:  #5983ff;
              }
              &.is-checked{
                background:#3575cb;
                border-color: #5693e5;
                .el-checkbox__label{
                  color: #fff;
                }
                .el-checkbox__inner{
                  background: #fff;
                  border-color: #fff;
                  height: 14px;
                  text-align: center;
                  display: inline-block;
                  line-height: 36px;
                   position: relative;
                  &::before{
                    content: '';
                    display: inline-block;
                    width: 4px;
                    height: 4px;
                    background: #5580ff;
                    border-radius: 50%;
                    position: absolute;  
                    top: 50%;
                    left: 50%;
                    margin-left: -2px;
                    margin-top: -2px;              
                  }
                  &::after{
                    display: none;
                  }
                }
              }
            }
          }
       }
      }
      .el-dialog__footer{
         .el-button--primary{
           padding: 8px 15px;
           background:#204ea3;
           border-color:#2c62af;
           color:#689ce6;
           &:hover{
              background:#2a64b6;
             border-color:#427dd0;
             color:#a3c9ff;
           }
         }
      }
    }
  }
  .demolog{
    .el-dialog{
      .el-dialog__body{
        background:#000;
        padding: 13px;
      }
    }
  }

//loading组件加载
.module-loading{
  position: absolute;
  width: 100%;
  top:0;
  left:0;
  border-radius: 5px;
  height:100%;
  z-index:3002;
  background: rgba(250,250,250,0.3);
  .block{
    width:7em;  
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  	position:absolute;
    &:before{
  		content:"";
  		display:block;
      width:7em;
      height:1em;
      margin:3em auto;
      padding:3em 0;
      border-radius:50%;
      position: relative;
      left:-2px;
      border:2px solid #fff;
      
      border-top:2px solid transparent;
      border-bottom:2px solid transparent;
      animation:rotate 1s ease infinite;
    }
    &:after{
      content:"Loading";
      position:absolute;
  		top:50%;
      transform: translateY(-50%);
      left:2px;
      color:#fff;
      font:.9em sans-serif;
      width: 100%;
     
      text-align:center;
      animation:wink 1.4s ease infinite;
    }
  }
 
}

.gxhbg {
  width: 98%;
  min-height: 95%;
  padding: 0 30px 20px 30px;
  background: #000;
  position: relative;

  left: 49.8%;
  transform: translateX(-50%);
  i {
    &.el-icon-caret-top {
      color: #8f1316;
    }

    &.el-icon-caret-bottom {
      color: #009344;
    }
  }

  #canvas{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: -1;
  }

  .full-screen {
    color: #fff;
    opacity: 0.5;
    font-size: 28px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 13px;
    transition: all 0.5s;

    &:hover {
      opacity: 1;
      
    }
  }

  .sumBlock {
    margin-bottom: 10px;
    width: 100%;
    background: url(/static/img/cockpik/headtitle.png) no-repeat 0px 100%;
    background-size: 100%;
    padding-bottom: 10px;
    text-align: center;
    .sum {
        display: inline-block;
        padding: 8px .8% 9px .8%;
        width: 288px;
        height: 128px;
        position: relative;
        h6 {
          color:#51a0fc;  
          font-size: 18px;
          text-align: center;
          position: relative;
          z-index: 3000;
          font-weight: bold;
        }
        h3 {
          font-size: 28px;
          text-align: center;
          color: #73b4ff;
          margin-top: 4px;
          background: url("/static/img/cockpik/bg_blue.png") no-repeat;
          background-size: 100% 100%;
          padding: 8px 0;
        }
        .sum-p {
          color: #4485c8;
          text-align: center;
          width: 100%;
          font-size: 0px;
          height: 42px;
          .sum-p-span1{
            display:inline-block;
            width: 50%;
            text-align: right;
            padding-right:20px;
            font-size: 14px;
          }
          .sum-p-span2{
            display:inline-block;
            width: 50%;
            text-align: left;
            padding-left:20px;
            font-size: 14px;
          }
          &.duo {
            span {
              left: 3%;
              &:last-child {
                right: 3%;
              }
            }
          }
        }

        &.mid{
          h6 {
            color: #fdd469;
          }

          h3 {
            background: url("/static/img/cockpik/bg_yellow.png") no-repeat;
            background-size: 100% 100%;
            color: #fdd469;
          }
          .sum-p {
          color: #fdd469;
        }
      }
    }

    
    
  }

 
}
.dragmove {
	padding:0 0 0 25px;			
	line-height: 22px;
  position: relative;
  display: block;

  text-align: left;
  line-height: 40px;
  z-index: 3000;
	h3 {
    font-size: 18px;
    line-height: 40px;
    color: #51a0fc;
    .report_i {
			display: inline-block;
			height: 22px;
			width: 22px;
			line-height: 22px;
			background-color: transparent;
			color: #3872b6;
			font-size: 14px;
			font-weight: bold;
			transition: all 0.3s;
			&:hover{transform: scale(1.2);}
		}
	}
	
}
.zujiandiv{
   width: 100%;
   height: 100%;
   padding: 3px;
   &.element1x1{
     background: url(/static/img/cockpik/bg_bule.png) no-repeat;
     background-size: 100% 100%;
     padding: 8px 0 18px 0  ;
      .dragmove {
    		line-height: 22px;
        position: relative;
    		h3 {
          line-height: 1;
          .report_i {
      			display: inline-block;
      			text-align: center;
      			line-height: 22px;
      			background-color: transparent;
      			color: #3872b6;
      			font-size: 14px;
      			font-weight: bold;
      			transition: all 0.3s;
      			&:hover{transform: scale(1.2);}
      		}
    		}
    	
    	}
   }
   &.element2x2{
      background: url(/static/img/cockpik/titleorborder.png) no-repeat;
      background-size: 100% 100%;
   }
   &.element2x4 {
      background: url(/static/img/cockpik/2x4bg.png) no-repeat;
      background-size: 100% 100%;
   }
}
.element1x1{
  position: relative;
  .con{
    h3{    
      font-size: 24px;
      text-align: center;
      color: #73b4ff;
      margin-top: 22px;
    }
    .sum-p{
      position: absolute;
      bottom: 14px;
      color:#3c74af;
      width: 100%;
      font-size: 0px;
      span{
        font-size: 14px;
        display:inline-block;
        width: 50%;
        &.leftspan{
          text-align: right;
          padding-right:16px;
        }
        &.rightspan{
          text-align: left;
          padding-left:16px;
        }
      }
    }
  }
}

.fullscreen {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  position: absolute;
  min-height: 110%;
  transform: translateX(0);
  padding: 0 30px 20px 30px;
  overflow:hidden;
}
</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import report from '@/config/report.js';      //驾驶舱组件配置
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  import realHeader from "@/components/analyzeRealTime/realheader";//头部条件
  var grid;      //grid变量   
  let com={               //所有组件列表
    page:page,
    realHeader
  }
  for (let i in report) {
    const element = report[i];
    if(element.component)
    com[element.name]=element.component;
  }
  export default {
    data() {
      let reportHead=['TotalPassengerFlowWeek','TotalSalesWeek','TotalPassengerFlowToday','TotalSalesToday','TotalPassengerFlowMonth','TotalSalesMonth']
      return {
        reportHeadTemp:[],//添加处临时使用的头部组件选择
        reportHead:reportHead,
        reportListHead:[
          {//头部组件内容，key请勿乱改，对应key改
            title: "本周客流",
            key: "TotalPassengerFlowWeek"
          }, {
            title: "本周销售",
            key: "TotalSalesWeek"
          }, {
            title: "今日客流",
            key: "TotalPassengerFlowToday"
          }, {
            title: "今日销售",
            key: "TotalSalesToday"
          }, {
            title: "本月客流",
            key: "TotalPassengerFlowMonth"
          }, {
            title: "本月销售",
            key:"TotalSalesMonth"
        }
        ],
        items:{},//当前组件列表；
        layout:{},//临时组件列表；

        dialog:false,   //添加组件模态框
        demodailog:false, //每个小的模态框
        demoVue:{
          w: 0,
          h: 0,
          title: '',
          name: ''
        },
        report:[],
        headCompanyKPIlist:[],//当前选择的总企业指标列表  
        KPIlist:[],//当前选择的企业或案场
        company_id: '',//公司id
        realHeaderData:{
          company_ids:'',//企业id
          case_ids:'',//案场id
          idsType:0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day:moment(new Date()).format("YYYY-MM-DD"),
          end_day:moment(new Date()).format("YYYY-MM-DD"),
        },
        company_ids: '',//多选企业ids
        global: '',//公共参数
        isFull: false,//是否全屏
        headData:{
          day:{
            sumFlow:{     //今日总客流量
              enters:"",
              tb:'',
              hb:'',
            },
             sumSale:{     //今日总销售额
              sale:"",
              tb:'',
              hb:'',
            },
          },
          week:{
            sumFlow:{     //上月总客流量
              enters:"",
              tb:'',
              hb:'',
            },
             sumSale:{     //上月总销售额
              sale:"",
              tb:'',
              hb:'',
            },
          },
          month:{
            sumFlow:{     //上月总客流量
              enters:"",
              tb:'',
              hb:'',
            },
            sumSale:{     //上月总销售额
              sale:"",
              tb:'',
              hb:'',
            },
          }
        },
        refresh:null,   //定时器
        isUpdata:false,//是否显示保存按钮
        getData:{},
        kpiValue:'',//指标类型
        apiData:{},    //每次调get接口储存当前head与body值
        orgAuthVos:null,//当前用户的orgAuthVos
        org_type:1,//最大权限
        org_id:'',//当前权限id
        isRoot:false,
        setIntervalGrid:null,
        minH:0,
        requseId:'',
        requseNumId:'',
        ageList:[],
      }
    },
    components: com,
    created() {
      this.getAgeList()
      this.isRoot = localStorage.isRoot == 1 ? true :false;
      this.orgAuthVos = localStorage.orgAuthVos ? JSON.parse(localStorage.orgAuthVos) : null;
      this.items = JSON.parse(JSON.stringify(report))
      for (let i in reportGlobal.queryList) {
        if (reportGlobal.queryList[i].name == '实时数据驾驶舱') {
          this.global = reportGlobal.queryList[i]
        }
      }
      this.global.unit=reportGlobal.unit;
      this.minH=$(window).height()-432;
    },
    mounted() {
      //个性化配置点击 保存或者添加
      this.$Bus.$on('indivconfig',val=>{
        this.dialog=true
        this.reportHeadTemp =this.apiData.head;
        let activeItems = grid.getItems();//获取所有显示的
        let UserRportSort = [];
        for(let i in activeItems){
          UserRportSort.push(activeItems[i]._element.dataset.id)
        }
        this.report = UserRportSort
      });

      this.$Bus.$on('companyData', data => {
        this.company_id = data.id;
        this.$Bus.$emit('Loading', true);
        if (this.isRoot) {
          // console.log('kpi');
          this.getHeadCompanyKpis(data.id)
        } else {
          let headCompanyKPIlistArr = [];
          for (let i in this.orgAuthVos) {
            if (this.orgAuthVos[i].company_id = data.id) {
              headCompanyKPIlistArr = this.orgAuthVos[i].indicator_list
              this.org_type = this.orgAuthVos[i].org_type
            }
          }
          // console.log(headCompanyKPIlistArr,'headCompanyKPIlistArr');
          let kpi = [];
          for (let i in headCompanyKPIlistArr) {
            kpi.push(headCompanyKPIlistArr[i].key)
          }
          // console.log(kpi,'kpi');
          this.headCompanyKPIlist = kpi;
          if (this.org_type == 1) {
            this.$nextTick(() => {
              this.getHeadCompanyCasesData();
              this.getHeadCompanyCasesData('week');
              this.getHeadCompanyCasesData('month');
            })
          } else {
            this.getAllCase(data.id)
          }

        }
      });

      this.$Bus.$on('realHeaderDataChange', data => {
        if(!data.company_ids){
          let obj = {
            realHeaderData: this.realHeaderData,
            global: this.global,
            org_type: this.org_type,
            ageList: this.ageList,
            index: 0
          }
          this.getData = obj;
          this.$message.warning('请至少选择一个企业');
          return
        }
        this.realHeaderData = data;
        
        let obj = {
          realHeaderData:this.realHeaderData,
          global:this.global,
          org_type:this.org_type,
          ageList: this.ageList,
          index:0
        }
        if(!obj.realHeaderData.company_ids.length){
          this.$message.warning('请至少选择一个企业');
          return
        }
        this.getData = obj;
        if(data.end_day == moment(new Date()).format("YYYY-MM-DD")){
          this.setIntervalGrid = setInterval(()=>{
            this.getData.index++
          },120000)
        }else{
          clearInterval(this.setIntervalGrid)
        }
      });

      this.refresh = setInterval(()=>{
        this.getHeadCompanyCasesData();
        this.getHeadCompanyCasesData('week');
        this.getHeadCompanyCasesData('month');
      },120000)
      window.onkeydown=(ev)=>{
        ev=ev||window.event;
        if(ev.keyCode==122){
           this.isFull=!this.isFull;
           setTimeout(()=>{
             this.$Bus.$emit('WinResize');
           },200)
        }
      }
      setTimeout(() => {
        window.onresize = () => {
          this.$Bus.$emit('WinResize');
          this.minH=$(window).height()-(this.isFull?320:432);
        };
      }, 200)

      this.initGrid();  //调用grid排序拖动插件
      this.$nextTick(()=>{
        this.canvasFun();
        if(this.items.length==1) {
          $('.grid').outerHeight($('.grid').children(":first").outerHeight()+13);
        }
      })
    },
    beforeDestroy(){
      this.$Bus.$off('indivconfig');
      this.$Bus.$off('companyData');
      this.$Bus.$off('realHeaderDataChange');
      window.onresize=null;
      window.onkeydown=null;
      grid=null;
      com=null;
      // console.log('执行了',this.requseId);
      window.cancelAnimationFrame(this.requseId);
      window.cancelAnimationFrame(this.requseNumId);
      clearInterval(this.refresh);
      clearInterval(this.setIntervalGrid);
    },
    watch: {},
    methods:{
      //获取年龄组配置
      getAgeList(){
        let url = '/sys/face_report/age_group'
        this.$api.post(url)
        .then(data=>{
          // console.log(data);
          this.ageList = data.data;
          this.getData.ageList = data.data;
        })
        .catch(err=>{
           console.log(err);
          this.$message.error('获取年龄组失败')
          this.$Bus.$emit('Loading', false)
        })
      },
      //获总公司取指标接口
      getHeadCompanyKpis(id,org_type = 1){
        let url='/sys/report_assist_new/get_indicator_list';
        let params = {
          org_id_list : Array.of(id),
          org_type :org_type,
        }
        this.$api.post(url,params)
        .then(data=>{
          if(data){
            this.headCompanyKPIlist = data.data.map(x=>{
              return x.key
            })
            // console.log(this.headCompanyKPIlist,'headCompanyKPIlist');
            this.$nextTick(()=>{
              this.getHeadCompanyCasesData();
              this.getHeadCompanyCasesData('week');
              this.getHeadCompanyCasesData('month');
            })
          }
          else{
            this.$Bus.$emit('Loading',false);
          }
        })
        .catch(err=>{
          // this.removeData();
          console.log(err,'企业下无指标11');
        })

      },
      
      //据  同比 头部数据 默认为天      //听
      getHeadCompanyCasesData(timeBuck='day'){
        let tb='week';
        let hb='day';
        let str_day=moment().format('YYYY-MM-DD');
        let end_day=moment().format('YYYY-MM-DD');
        let str_hm='00:00';
        let end_hm=moment().format('HH:mm');
        // let end_hm='23:59';
        switch(timeBuck)
        {
          case 'day':{
            break;
          }
          case 'week':{
            tb='week';
            hb='day';
            const weekOfday = moment().format("E"); //计算今天是这周第几天
            str_day=moment().subtract(weekOfday - 1, "days").format("YYYY-MM-DD");
            end_day=moment().format('YYYY-MM-DD');
            str_hm='00:00';
            end_hm='23:59';
            break;
          }
          case 'month':{
            tb='year';
            hb='month';
            str_day=moment().month(moment().month()).startOf("month").format("YYYY-MM-DD");
            end_day=moment().format('YYYY-MM-DD');
            str_hm='00:00';
            end_hm='23:59';
            break;
          }
        }
       
        let data = null;
        let group_type='';
        if(this.org_type == 1 || this.isRoot){
          group_type='company';
          data = {
            org_id_list : this.company_id.split(","),
            org_type:1,
          }
        }else{
          group_type='case';
          data = {
            org_id_list : this.org_id,
            org_type:2,
          }
        }
        let url =  '/sys/report_new/distribution_sum_ratio?group_type='+group_type+'&tags='+this.global.tags+
            '&indicator_keys=enters,actual_sales&huanbi_type='+hb+'&tongbi_type='+tb+'&start_day=' + str_day + '&end_day='+ end_day +
            '&start_hm='+ str_hm + '&end_hm=' + end_hm;
        // this.changeSum('dayFlow',0,0)
        // this.changeSum('daySale',0,0)
        // this.changeSum('weekFlow',0,0)
        // this.changeSum('weekSale',0,0)
        // this.changeSum('monthFlow',0,0)
        // this.changeSum('monthSale',0,0)
        this.$api.post(url,data)
        .then(data=>{
          if(data=='10001')
          {
            switch(timeBuck)
              {
                case 'day':{
                  this.changeSum('dayFlow', 0, this.headData.day.sumFlow.enters)
                  this.changeSum('daySale', 0, this.headData.day.sumSale.sale)
                  this.headData.day.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.day.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'week':{
                  this.changeSum('weekFlow', 0, this.headData.week.sumFlow.enters)
                  this.changeSum('weekSale', 0, this.headData.week.sumSale.sale)
                  this.headData.week.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.week.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'month':{
                  this.changeSum('dayFlow', 0, this.headData.month.sumFlow.enters)
                  this.changeSum('daySale', 0, this.headData.month.sumSale.sale)
                  this.headData.month.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.month.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
              }
            return 
          }
          if(data && data.data && data.data.sum_list && data.data.sum_list.length){
            let _data = data.data;
            if(_data.sum_list.length){
              switch(timeBuck)
              {
                case 'day':{
                  this.changeSum('dayFlow', _data.sum_list[0].enters, this.headData.day.sumFlow.enters==''||this.headData.day.sumFlow.enters==_data.sum_list[0].enters?0:this.headData.day.sumFlow.enters)
                  this.headData.day.sumFlow={
                    enters:_data.sum_list[0].enters, //今日总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('daySale', _data.sum_list[0].actual_sales, this.headData.day.sumSale.sale==''||this.headData.day.sumSale.sale==_data.sum_list[0].actual_sales?0:this.headData.day.sumSale.sale)
                  this.headData.day.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                }
                case 'week':{
                  this.changeSum('weekFlow', _data.sum_list[0].enters, this.headData.week.sumFlow.enters==''||this.headData.week.sumFlow.enters==_data.sum_list[0].enters?0:this.headData.week.sumFlow.enters)
                  this.headData.week.sumFlow={
                    enters:_data.sum_list[0].enters, //周日总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('weekSale', _data.sum_list[0].actual_sales, this.headData.week.sumSale.sale==''||this.headData.week.sumSale.sale==_data.sum_list[0].actual_sales?0:this.headData.week.sumSale.sale)
                  this.headData.week.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                }
                case 'month':{
                  this.changeSum('monthFlow', _data.sum_list[0].enters, this.headData.month.sumFlow.enters==''||this.headData.month.sumFlow.enters==_data.sum_list[0].enters?0:this.headData.month.sumFlow.enters)
                  this.headData.month.sumFlow={
                    enters:_data.sum_list[0].enters, //月总进入人数
                    tb:_data.sum_list[0].enters_tb,
                    hb:_data.sum_list[0].enters_hb,
                  }

                  this.changeSum('monthSale', _data.sum_list[0].actual_sales, this.headData.month.sumSale.sale==''|| this.headData.month.sumSale.sale==_data.sum_list[0].actual_sales?0:this.headData.month.sumSale.sale)
                  this.headData.month.sumSale={
                    sale:_data.sum_list[0].actual_sales, //总进销售额
                    tb:_data.sum_list[0].actual_sales_tb,
                    hb:_data.sum_list[0].actual_sales_hb,
                  }
                  break;
                }
              }
            }
          }
          else{
            switch(timeBuck)
            {
              case 'day':{
                this.changeSum('dayFlow', "", this.headData.day.sumFlow.enters)
                this.changeSum('daySale', "", this.headData.day.sumSale.sale)
                this.headData.day.sumFlow={
                  enters:'',
                  tb:'',
                  hb:'',
                }
                this.headData.day.sumSale ={
                  sale:'',
                  tb:'',
                  hb:'',
                }
                break;
              }
              case 'week':{
                this.changeSum('weekFlow', "", this.headData.week.sumFlow.enters)
                this.changeSum('weekSale', "", this.headData.week.sumSale.sale)
                this.headData.week.sumFlow={
                  enters:'',
                  tb:'',
                  hb:'',
                }
                this.headData.week.sumSale ={
                  sale:'',
                  tb:'',
                  hb:'',
                }
                break;
              }
              case 'month':{
                this.changeSum('monthFlow', "", this.headData.month.sumFlow.enters)
                this.changeSum('monthSale', "", this.headData.month.sumSale.sale)
                this.headData.month.sumFlow={
                  enters:'',
                  tb:'',
                  hb:'',
                }
                this.headData.month.sumSale ={
                  sale:'',
                  tb:'',
                  hb:'',
                }
                break;
              }
            }
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err=>{
          // console.log(1);
           console.log(err);
          switch(timeBuck)
              {
                case 'day':{
                  this.changeSum('dayFlow', 0, this.headData.day.sumFlow.enters)
                  this.changeSum('daySale', 0, this.headData.day.sumSale.sale)
                  this.headData.day.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.day.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'week':{
                  this.changeSum('weekFlow', 0, this.headData.week.sumFlow.enters)
                  this.changeSum('weekSale', 0, this.headData.week.sumSale.sale)
                  this.headData.week.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.week.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
                case 'month':{
                  this.changeSum('monthFlow', 0, this.headData.month.sumFlow.enters)
                  this.changeSum('monthSale', 0, this.headData.month.sumSale.sale)
                  this.headData.month.sumFlow={
                    enters:'',
                    tb:'',
                    hb:'',
                  }
                  this.headData.month.sumSale ={
                    sale:'',
                    tb:'',
                    hb:'',
                  }
                  break;
                }
              }
          this.$Bus.$emit('Loading', false);
        })
      },

      //是否全屏
      IsFull() {
        let isFull = window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        //to fix : false || undefined == undefined
        if (isFull === undefined) {isFull = false;}
        return isFull;
      },

      FullClick() {
        this.isFull = !this.isFull;
        setTimeout(() => {
          this.$Bus.$emit('WinResize');
        }, 200)
        this.$nextTick(() => {
          let docElm = document.documentElement;
          //W3C
          //是否全屏
          if (!this.IsFull()) {
            if (docElm.requestFullscreen) {
              docElm.requestFullscreen();
            }
            //FireFox
            else if (docElm.mozRequestFullScreen) {
              docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
              docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
              docElm.msRequestFullscreen();
            }
          } else {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          }
        })
      },
      //canvas  背景
      canvasFun() {
        let _this = this
        var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width = window.innerWidth,
        h = canvas.height = window.innerHeight,
        hue = 217,
        stars = [],
        count = 0,
        maxStars = 500;//星星数量
        var canvas2 = document.createElement('canvas'),
        ctx2 = canvas2.getContext('2d');
        canvas2.width = 100;
        canvas2.height = 100;
        var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
        gradient2.addColorStop(0.025, '#CCC');
        gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
        gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
        gradient2.addColorStop(1, 'transparent');

        ctx2.fillStyle = gradient2;
        ctx2.beginPath();
        ctx2.arc(half, half, half, 0, Math.PI * 2);
        ctx2.fill();
        // End cache
        function random(min, max) {
          if (arguments.length < 2) {
            max = min;
            min = 0;
          }
          if (min > max) {
            var hold = max;
            max = min;
            min = hold;
          }
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function maxOrbit(x, y) {
          var max = Math.max(x, y),
            diameter = Math.round(Math.sqrt(max * max + max * max));
          return diameter / 2;
          //星星移动范围，值越大范围越小，
        }

        var Star = function() {
          this.orbitRadius = random(maxOrbit(w, h));
          this.radius = random(60, this.orbitRadius) / 8;
          //星星大小
          this.orbitX = w / 2;
          this.orbitY = h / 2;
          this.timePassed = random(0, maxStars);
          this.speed = random(this.orbitRadius) / 500000;
          //星星移动速度
          this.alpha = random(2, 10) / 10;

          count++;
          stars[count] = this;
        }
        Star.prototype.draw = function() {
          var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
            y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
            twinkle = random(10);

          if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
          } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
          }

          ctx.globalAlpha = this.alpha;
          ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
          this.timePassed += this.speed;
        }
        for (var i = 0; i < maxStars; i++) {
          new Star();
        }
        function animation() {
          ctx.globalCompositeOperation = 'source-over';
          ctx.globalAlpha = 0.5; //尾巴
          ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
          ctx.fillRect(0, 0, w, h);
          ctx.globalCompositeOperation = 'lighter';
          for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
          }
          // console.log('调用了requestAnimationFrame');
          _this.requseId=window.requestAnimationFrame(animation);
        }
        animation();
      },
      //数字滚动
      changeSum(id,newVal,oldVal){
        let _this=this;
        let numBox = document.getElementById(id);
        let speed =  parseInt((newVal - oldVal)/50 + (Math.random()*10))
        // console.log(speed,'speed');
        /**
         * 数字滚动
         * @param {Object} num 		开始值
         * @param {Object} maxNum	最大值,最终展示的值
         */
        function numRunFun(num,maxNum){
          let numText = num;
          let golb; // 为了清除requestAnimationFrame
          function numSlideFun(){
            numText += speed; // 速度的计算可以为小数
            if(numText >= maxNum){
              numText = maxNum;
              cancelAnimationFrame(golb);
              if(numBox)
                numBox.innerHTML=(numText);
            }else {
              _this.requseNumId = golb = requestAnimationFrame(numSlideFun);
              if(numBox)
                numBox.innerHTML = ~~(numText)
            }
          }
          numSlideFun();
        }
        // 运行
        numRunFun(oldVal,newVal)
      },

      //个性化
      //添加报表模态框等
      show(e,val){
        this.demoVue=val;
        this.demodailog=true;
      },
      //调用murri
      initGrid(){
        grid = new Muuri('.grid', {
          dragEnabled: true,       //拖拽
          layoutOnInit: false,     //排序
          layout:{
            fillGaps:true
          }
        })
        .on('filter',(shownItems,hiddenItems)=>{
        })
        .on('move', () => {
          this.isUpdata = true;
        });
        this.getExp();
      },
      getExp(){
        this.$Bus.$emit('Loading',true);
        let url='/sys/user/get-user-exp';
        this.$api.get(url)
        .then(data=>{
          if(data&&data.data)
          {
            let _data=JSON.parse(data.data.cockpit);
            this.reportHead=_data.head;
            this.report=_data.body;
            this.apiData={
              head:this.reportHead,
              body:_data.body
            };
            if(_data.body){
              this.showGrid(_data.body);
            }else{
              grid.layout((true));
            }
            this.isUpdata = false;
          }
          else{            
            let bodyarr=[
               'enters_and_actual_sales_echarts',
               'enters',
               'actual_sales',
               'actual_sales_echarts',
               'guest_avg_price',
               'sold_rate',
               'case_actual_sales_Ranking',
               'case_enters_Ranking',
               'city_avg_echarts',
               'sold_rate_echarts',
               'city_avg_Ranking'
            ];
            this.report=bodyarr;
            if(bodyarr){
              this.showGrid(bodyarr);
            }else{
              grid.layout(true);
            }
            this.isUpdata = true;
            this.apiData={
              head:this.reportHead,
              body:bodyarr
            }
          }
          
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
           console.log(err);
           this.$Bus.$emit('Loading',false);
        })
      },
      //显示组件
      showGrid(showData){
        for(let i in showData){
          this.$set(this.items[showData[i]],'isShow',true)
          this.$nextTick(()=>{
            let el=$('.'+ showData[i]);
            grid.add(el[0]);
          })
        }
        this.$nextTick(()=>{
          let obj = {
            realHeaderData:this.realHeaderData,
            global:this.global,
            org_type:this.org_type,
            ageList:this.ageList
          }
         
          this.getData = obj
        })
      },
      //隐藏组件
      hideGrid(hideData){
        // console.log(hideData);
        for(let i in hideData){
          let el=$('.'+ hideData[i]);
          
          grid.remove(el[0]);
          this.$nextTick(()=>{
            this.$set(this.items[hideData[i]],'isShow',false)
          })
        }
      },
      //添加组件
      addRport(){
        let headData=[];
        if(this.reportHeadTemp.length<3){//头部组件选择
          this.$message({
            type: 'error',
            message: '请至少选择3个头部组件!'
          });
          return
        }else{
          headData = this.reportHeadTemp;     
        }
        
        let activeItems = grid.getItems();//获取所有显示的
        let nowShowItems = [];//当前显示的item的id数组
        for(let i in activeItems){
          nowShowItems.push(activeItems[i]._element.dataset.id)
        }
        let newArr = [];//新增的数组
        let delArr = [];//移除的数组

        for (let i in this.report) {
          if(!nowShowItems.includes(this.report[i])){
            newArr.push(this.report[i])
          }
        }

        for(let i in nowShowItems){
          if(!this.report.includes(nowShowItems[i])){
            delArr.push(nowShowItems[i])
          }
        }
        this.showGrid(newArr);
        this.hideGrid(delArr);

        this.$nextTick(()=>{
          this.saveRport(headData);
          this.getHeadCompanyCasesData();
          this.getHeadCompanyCasesData('week');
          this.getHeadCompanyCasesData('month');
        })
      },
      //保存配置
      saveRport(headData=false){
        this.$Bus.$emit('Loading',true);
        let activeItems = grid.getItems();//获取所有显示的
        let UserRportSort = [];
        
        for(let i in activeItems){
          UserRportSort.push(activeItems[i]._element.dataset.id)
        }
       
        let dataval={
          head:headData?headData:this.reportHead,
          body:UserRportSort,
        }
        this.apiData=dataval;
        dataval=JSON.stringify(dataval);
        let parmas={
          cockpit:dataval
        }
        let url='/sys/user/save-cockpit';
        this.$api.post(url,parmas)
        .then(data=>{
          if(data.msg=='success')
          {
            this.report = UserRportSort;
            if(headData)
            {
              this.reportHead=headData;
            }
            if(!this.realHeaderData.company_ids.length)
            {
              this.$refs.realheadref.getReady();
            }
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.isUpdata = false
            this.dialog = false//关闭窗口
          }
          else{
            this.$message({
              type: 'warning',
              message: '保存失败!'
            });
          }
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
          this.$message({
              type: 'warning',
              message: '保存失败!'
          });
           console.log(err);
          this.$Bus.$emit('Loading',false);
          return 
        })
       
        
        
      },
      //删除组件
      deleteLayout(idclass){
        let ele = $('.muuri-item.' + idclass);
        grid.remove(ele[0]);
        for(let i in this.items){
          if(i == idclass) this.items[i].isShow = false
        }

        for(let i in this.report){
          if(idclass == this.report[i]){
            this.report.splice(i,1)
          }
        }
        this.isUpdata = true;
      },
      //保存
      saveAssembly(){
       this.saveRport()
      },
      //取消更改
      cancelAssembly(){
        let ele = $('.muuri-item');
        for(let i = 0 ; i < ele.length;i++){
          grid.remove(ele[i]);
          this.items[ele[i].dataset.id].isShow = false
        }
        this.getExp();
      },
      getAllCase(id){
        let url = '/sys/report_assist_new/case_list'
        let params = {
          org_id_list : [id],
          org_type:1,
        }
        this.$api.post(url,params).then(data => {
          if (data) {
            if(data.data){ 
              this.org_id = data.data.map(x=>x.id);
              this.getHeadCompanyCasesData();
              this.getHeadCompanyCasesData('week');
              this.getHeadCompanyCasesData('month');
            }
          } else {
            this.$message.warning('该企业下无案场!');
          }
          this.$Bus.$emit('Loading', false);
        })
        .catch(err => {
           console.log(err);
          this.$Bus.$emit('Loading', false);
        })
      }
    },
  }
</script>

